

<template>
    <view class="systemMsg">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff;position:fixed;z-index:100;width:750rpx;"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;position:fixed;z-index:100;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">互动消息</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        

        <view class="content" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
            <scroll-view :scroll-y="true"
            class="scr"
            :lower-threshold="100"
            @scrolltolower="loadMore"
            
        >
            <view class="card d-flex" v-for="item in list" @tap="handleAction(item)">
				<!--
				{{item.userData.avatar}}
				-->
                <userhead @tap.stop="goUserDetail(item.userData.userID)" :width="100" :height="100" :saveKey="item.userData.userID" :isVip="item.userData.level" :url="item.userData.avatar" :src="item.userData.avatar"/>
                <view class="msg">
                    <view class="title d-flex a-center j-between">
                        <view class="d-flex a-center">
                            <sexage :sex="formatGender(item.userData.gender)" :age="formatBirthday(item.userData.birthday)" />
                            <text class="uname">
                                {{ item.userData.nick }}
                            </text>
                        </view>

                        <view class="time">
                            {{formatMessageTime1(item.time*1000)}}
                        </view>
                    </view>
                    <view class="desp">
                        {{item.extension.text}}
                    </view>
					<!--
                    <view class="note" v-if="item.extension.note">
                        {{item.extension.note}}
                    </view>
					-->
                </view>
            </view>
        </scroll-view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref,computed,reactive } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    getUserProfile
} from "@/hooks/imHooks";
import moment from 'moment'

import { config as configStore } from "@/store/config";
import cacheimg from "@/components/cacheimg.vue";
import userhead from "@/components/userhead.vue";
import sexage from "@/components/sexage.vue";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { imStore } from "@/store/imStore";
import { centToYuan } from "@/utils/format";


import { formatMessageTime1 } from "@/pages/TUIKit/utils/date";

const systemConfig: any = systemConfigStore();
const IM_STORE: any = imStore();


const goBack = () => {
    uni.navigateBack();
};

const formatGender = (str:string)=>{
    if(str==="Gender_Type_Male"){
        return 1
    }
    if(str==="Gender_Type_Famale"){
        return 2
    }
    return 0;

}


const formatBirthday = (b:number)=>{
    const now = moment();
    const birthday = moment(''+b)
    return Math.floor(now.diff(birthday, 'years', true))
}

const loadMore = async () => {
    if (isCompleted.value) {
        return;
    }
    const historyData = await uni.$TUIKit.TUIChatServer.getHistoryMessageList();
    isCompleted.value = historyData.isCompleted;
    const arr = JSON.parse(JSON.stringify(historyData.messageList)); 
    const result = await getUserDatas(arr.reverse());
    list.value.push(...result);
};


const handleAction = (item:any)=>{
    const type = item.payload.data;
    if(!type){
        return;
    }

    if(type==='interact1'||type==='interact2'||type==='interact3'){
        const fcmid = item.extension.link;
        uni.navigateTo({
            url: `/pages/trends/trendDetail?fcmid=${fcmid}`,
        });
    }
}

const goUserDetail = (userId:string) => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}`,
    });
};


const getUserDatas = async (arr) => {




    let userIds = [];
    let list = [];
    arr.forEach(item=>{
        try{
            console.log(item.payload.extension)
            let obj = JSON.parse(item.payload.extension);
            item.extension = obj
            list.push(item)
            userIds.push(item.extension.userId)
            

        }catch(e){
            console.log('eeeeee')
            console.log(e)
            //TODO handle the exception
        }
    })

    const {code ,data} = await getUserProfile([...new Set(userIds)])

    list.forEach((item,index)=>{
        data.forEach((user)=>{
            if(item.extension.userId===user.userID){
                item.userData = user;
            }
        })
    })
    return list

}

const recivedNewMsg = async (msg:any)=>{
    const arr = [JSON.parse(JSON.stringify(msg))];
    const result = await getUserDatas(arr)
    list.value.unshift(...result)
}



const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const isCompleted = ref(false);

const list = ref([]);
onReady(() => {
});
onShow(() => {
});

onLoad(async (option: any) => {
    const arr = JSON.parse(JSON.stringify(IM_STORE.messageList))
    list.value = await getUserDatas(arr.reverse());
	
    uni.$on('recivedNewMsg',recivedNewMsg)
});

onUnload(() => {
	uni.$TUIKit.TUIConversationServer.setMessageRead(IM_STORE.conversation.conversationID);
    uni.$off('recivedNewMsg',recivedNewMsg)
    uni.$TUIKit.TUIChatServer.destroyed();
    
});

</script>

<style lang="scss" scoped>




.systemMsg{

    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        bottom:0;
        display:flex;
        .scr{
            flex:1;
        }
        .card{
            width:710rpx;
            padding:20rpx;
            background:#fff;
            border-radius: 20rpx;
            margin:0 auto;
            margin-top:20rpx;
            gap:10rpx;
            .msg{
                flex:1;
                .title{
                    .uname{
                        font-size:24rpx;
                        color:#999;
                        margin-left:10rpx;
                    }
                    .time{
                        font-size:26rpx;
                        color:#999;
                    }
                }

                .desp{
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #333333;
                    line-height: 40rpx;
                    margin-top:16rpx;
                }

                .note{
                    font-weight: 400;
                    color: #999999;
                    line-height: 40rpx;
                    font-size:24rpx;
                    border-top:1rpx solid #E4E4E4;
                    margin-top:12rpx;
                    padding-top:8rpx;

                }
            }
        }
    }

}
</style>
